<template>
  <view class="shop-card-wrap card-wrap">
    <view class="card-title" :style="{color: titleColor || '#000'}">{{ title || '青丝几何商城' }}</view>
    <view class="modules-wrap">
      <image
        v-for="item in moduleList"
        :key="item.id"
        :src="getImgUrl(item.image)"
        class="module"
        @click="onTo(item)"
      />
    </view>
  </view>
</template>

<script>
import {
  execFn,
  getImg,
  getCurrentPageConfigByName
} from '../../../utils/index'
export default {
  name: 'ShopCard',
  data() {
    return {
      title: '',
      titleColor: '',
      moduleList: []
    }
  },
  mounted() {
    this.initPage()
  },
  methods: {
    initPage() {
      const _this = this
      getCurrentPageConfigByName('青丝几何商城').then(res => {
        console.log('青丝几何商城---模块配置数据')
        console.log(res)
        const { name, color, app_path_set_dt } = res
        _this.title = name
        _this.titleColor = color
        _this.moduleList = app_path_set_dt
      })
    },
    getImgUrl(imgId) {
      return getImg(imgId)
    },
    onTo(data) {
      const {
        url
      } = data
      url && execFn(url)
    }
  }
}
</script>

<style lang="scss" scoped>
	.shop-card-wrap {
		margin-bottom: 20rpx;

		.card-title {
			font-size: 32rpx;
			font-weight: bolder;
			padding-bottom: 25rpx;
			border-bottom: 1px solid #e6e6e6;
		}

		.modules-wrap {
			display: flex;
			gap: 26rpx;
			margin-top: 26rpx;

			.module {
				flex: 1;
				height: 206rpx;
.module-img{
  
}
			}
		}
	}
</style>
